import React, { FC, useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { ajax } from '../../../api'
import Myhead from '../../../components/myhead'
import { Avatar, List, Space } from 'antd-mobile'
import { baseURL } from '../../../api/request'
import './adviDet.scss'
import { vipList } from '../../../utils'
import { Tag } from 'antd'
import {
  DingtalkOutlined
} from '@ant-design/icons';
import moment from 'moment'

const  AdviseDetailed:FC<any>=()=> {
  const [obj,setObj] = useState<any>(null)
  const params = useParams()
  const navigate = useNavigate()
   //获取意见信息，
   useEffect(()=>{
    ajax.getadviseone({
        _id:params.aid 
    })
    .then(res=>{
        if(res.code==200){
            setObj(res.result)
        }
    })
},[])
obj&&console.log(obj);

  return (
   
    <div style={{position:"relative"}} className="paddingtop">
        <Myhead title="建议详情" back={true}></Myhead>
        {/* obj是数据 */}
        {obj&&<div className="content">
          <div className='avatarTop'>
            {obj.info.avatar?<Avatar src={obj.info.avatar.replace(/public/,baseURL)} style={{ '--size': '0.55rem' }} />:<Avatar src={require('../../../assets/images/xiaoxin_2.jpg')}></Avatar>}
            <div className='username'>
              <p>
                <span className='usernamespan'>{obj.info.username}</span>
                <span style={{marginLeft:'0.1rem'}}>
                    <Tag icon={<DingtalkOutlined />} 
                    color={vipList.find(v=>v.value==obj.info.role)?.color}>
                    {vipList.find(v=>v.value==obj.info.role)?.label}
                    </Tag>
                </span>
              </p>
              <p style={{fontSize:'0.12rem',color:"#999"}}>
                <span>来自   </span>
                <span>
                  {moment(obj.time).format("YYYY-MM-DD HH:mm")}
                </span>
              </p>
            </div>
          </div>
          <div className='advitype'>
              <p>
              <span className='title'>意见类别:</span>
                  {
                    obj.category&&obj.category.map((item: any,index: any)=>{
                      if(index!=obj.category.length-1){
                        return (
                          <span key={index} className='category'>
                              {item}&gt;&gt;
                          </span>
                        )
                      }else{
                        return (
                          <span key={index} className='category'>
                              {item}
                          </span>
                        )
                      }
                    }
                    )
                  }
              </p>
            </div>
            <div className='advcontent'>
              <p className='advtitle'>
                {obj.title}
              </p>
              <p dangerouslySetInnerHTML={{__html:obj.content}} />
            </div>
        </div>}
            
    </div>
    
  )
}
export default AdviseDetailed
